<template>
	<view style="padding-bottom: 200rpx;">
		
		<view class="item" v-for="(item ,index) in list.activ_list" :key="index" @click="lookVideo(index)">
			<view class="title">
				{{item.title}}
			</view>
			<view class="game">
				<view class="media">
					<image v-if="index!=Xindex" :src="item.pic" mode=""></image>
					<video v-else :src="item.video_a"></video>
				</view>

				<view class="type" v-if="item.time_list.length">
					<text>单队挑战时长：{{item.time_list[0]}}</text>
				</view>
				<view class="" style="display: flex;font-size: 24upx;color: #333;margin: 0 10upx;">
					<view class="" style="width: 200rpx;">
						价格明细
					</view>
					<view class="" style="flex: 1;">
						<view class="" style="text-align: right;">
							活动价格：￥{{item.price_a}}
						</view>
						<view class="prop_list" v-if="item.props.id&&item.props.props_num">
							<view class="">
								<text>￥{{item.props.price}}</text> <text class="statistics_num">
									<text>X</text>{{item.props.props_num}}</text>
							</view>
							<view style="">道具购买 | {{item.props.title}}</view>
						</view>
						<view class="prop_list" v-if="item.rent.num">
							<view class="">
								<text>￥{{item.rent.price_s}}/天</text>(押金：{{item.rent.price}}) <text
									class="statistics_num"> <text>X</text>{{item.rent.num}}</text>
							</view>
							<view style="">道具租赁 | {{item.rent.title}}</view>
						</view>

					</view>
				</view>
				
				<view class="" style="font-size: 24upx;font-weight: 700;text-align: right;margin:20upx 10upx ;">
					预计花费：<text style="color: red;">￥{{(item.props.price?item.props.price*item.props.props_num:0) + (item.price_a||0)}}</text>
				</view>
			</view>


		</view>
		
		<view style="position: fixed;bottom: 0;left: 0;height: 120upx;width: 100vw;background-color: #fff;display: flex;align-items: center;">
			<button class="btn" open-type="share">去分享</button>	
		</view>
		
		

				


	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				id: '',
				Xindex:-1
			}
		},
		onLoad(e) {
			this.id = e.id
			this.upData()


		},
		onShareAppMessage(){
			return {
				title:'定制方案',
				path:'/pages/trolley/trolleyScheme?id='+this.id
			}
		},
		methods: {
			lookVideo(index){
				this.Xindex=index
			},
			upData() {	
				this.$myRuquest('home/custom/cart_custom_det', {
					custom_id: this.id
				}).then(res=>{
					this.list = res.data
				})
				
			}
		
		}
	}
</script>

<style lang="scss">
	.item {
		padding: 30upx;
		background-color: #ffffff;

		.title {
			font-size: 28upx;
			color: #333333;
			font-weight: 700;
			margin-bottom: 20upx;
		}
		.game{
			background-color: #FAFAFA;
			border-radius: 8upx;
			overflow: hidden;
			width: 100%;
			margin-bottom: 40upx;
			.media{
				width: 100%;
				height: 388upx;
				margin-bottom: 20upx;
				video ,image{
					width: 100%;
					height: 100%;
				}
			}
			.type{
				margin-bottom: 20upx;
				text{
					background-color: #FEF2E2;
					padding: 4upx 20upx;
					color: #AC7D3D;
					font-size: 24upx;
					border-radius: 25upx;
					margin: 0 10upx;
				}
			}
		}
	}

	.prop_list {
		// padding-left: 160upx;
		font-size: 24upx;
		color: #333333;
		display: flex;
		flex-direction: row-reverse;
		margin-top: 20upx;

		>view {
			// flex: 1;
			margin: 0 20upx;

			word-wrap: break-word;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			.statistics_num {
				margin-left: 20upx;

				text {
					font-size: 20upx;
				}
			}
		}

		>view:nth-child(2) {
			display: flex;
			justify-content: space-between;
			margin-left: 10upx;
		}
	}
	.btn {
		width: 360upx;
		background-color: #FED194;
		color: #AC7D3D;
		height: 80upx;
		border-radius: 80upx;
		line-height: 80upx;
		margin:auto;
		font-size: 36upx;
		text-align: center;
		font-weight: 100;
	}
	.anew_btn{
		width: 234upx;
		height: 68upx;
		line-height: 68upx;
		border-radius: 34upx;
		text-align: center;
		background-color: #FED194;
		color: #AC7D3D;
		font-size: 28upx;
	}
</style>
